\chapter{\textit{OwnCloud News} веб апликација}
\label{chap:ownCloudNews}

Претходна поглавља су појаснила основне концепте коришћених технологија \textit{Firefox} оперативног система и начин на који је текао развој апликације која је предмет проучавања у овом раду. Објашњења у претходним поглављима су имала за задатак да читаоцу дају увид и омогуће му да формира ширу слику о самом пројекту. Ово поглавље ће се пак сконцентрисати на појашњење неких делова имплементације.

\section{Жељене функционалности}

Ако се проуче тренутне функционалности \textit{News} апликације, може се приметити да их нема много, и да практично једна подапликација која служи као RSS агрегатор не би ни требало да буде превише компликована. Самим тим, мобилна апликација би у најбољем случају имала исте функционалности као и апликација на серверу, али је тај скуп функционалности додатно ограничен верзијом API-а коју серверска апликација дефинише. Скуп функционалности чија је имплементација била предложена за учесника GSOC такмичења су:
\begin{enumerate}
	\item преглед свих новости,
	\item преглед свих фаворизованих новости,
	\item преглед новости по категоријама,
	\item преглед новости по токовима.
\end{enumerate}

Начин на који апликација треба да пружи ове функционалности кориснику је описана дијаграмом \ref{fig:application_alogorithm}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{slike/runtime_news_app1.png}
	\caption{Начин извршавања мобилне апликације \textit{News}}
	\label{fig:application_alogorithm}
\end{figure}

Представљен алгоритам извршавања је сасвим довољан да се стекне потпуна слика о начину на који се корисник може кретати кроз екране апликације. У наставку ће бити приказани делови програмског кода који су, по мишљењу аутора рада, најинтересантнији, али свакако не могу пружити читаоцу комплетан увид у пројекат. Потпун код пројекта се може погледати на званичном \textit{GitHub} репозиторијуму\cite{news_mobile}.


\subsection{Рутирање}

Када је реч о веб апликацијама, програмер мора посебно водити рачуна о могућим веб страницама, менијима који омогућавају кретање кроз апликацију и могућност приступа страницама у зависности од ауторизације корисника. Менији су само репрезентација могућих опција које корисник има током кретања кроз апликацију. У спрези са серверском апликацијом \textit{Apache} и модулом \texttt{mod\_rewrite}, апликација може користити URL адресе страница са предатим GET параметрима, док је адреса коју корисник у Интернет прегледачу види исписана у, за корисника, разумљивом формату. Наиме, то је један од услова које и познати Интернет претраживач \textit{Google} захтева од веб страница.

NG платформа пружа могућност формирања URL адреса које су разумљиве кориснику, а истовремено за њих везује конкретан контролер и HTML шаблон. Овакав приступ даје неколико олакшица, међу којима су изостављање спецификације контролера у самом HTML фајлу и могућност уметања шаблонских HTML фајлова у главни HTML фајл, везивања посебних контролера за њих и све то у зависности од URL адресе.

Коришћење погодности рутирања даје директива \texttt{ng-view}. Обично бива уметнута у HTML елемент као атрибут без вредности и омогућава да се садржај унутар елемента мења у зависности од URL адресе. Као пример, овде је дат садржај \texttt{index.html} фајла \ref{lst:index_file}.

\lstinputlisting[label=lst:index_file,language=HTML5,caption=Садржај index.html фајла]{primeri_koda/news_app/index.html}

Ова страница се учитава при покретању и представља сам костур апликације. Унутар \texttt{div} елемента (које има \texttt{ng-view} директиву) се учитавају шаблонски HTML фајлови у зависности од URL адреса тј. рута.

Руте су у апликацији постављене у посебном фајлу који се учитава при покретању \textit{Angular} \texttt{app.js} скрипте.

\lstinputlisting[language=HTML5,label=route.js,caption=Начин рутирања у апликацији]{primeri_koda/news_app/route.js}

У датом листингу ce може видети да постојеће руте дају могућност приступа \texttt{main.html} и \texttt{login.html} шаблонским HTML фајловима, при чему се сваком од њих додељује тачно одређен контролер, у овом случају \texttt{MainController} и \texttt{LoginController}, респективно.

Дакле, уколико је URL адреса веб апликације \texttt{http://primer.com/\#/login}, биће учитан \texttt{index.html} фајл, са скупом свих \textit{JavaScript} фајлова и CSS стилова. Затим ће у \texttt{div} елементу са декларисаном \texttt{ng-view} директивом бити уметнут садржај \texttt{login.html} фајла, који ће се након уметања евалуирати према садржају \texttt{LoginController} скрипте.

\subsection{Аутентификација}

Као што је већ споменуто у једном од претходних поглавља, аутентификација корисника коришћењем API-а \textit{News} апликације се врши предајом криптованог корисничког имена и лозинке у заглављима HTTP упита. Енкрипција која се користи је \texttt{base64}, чији је алгоритам врло једноставан и без тешкоћа је могуће декриптовати садржај. Због тога се у комуникацији са \textit{OwnCloud} серверском апликацијом препоручује HTTPS протокол, који ће целу комуникацију између клијента и сервера додатно криптовати знатно сигурнијим алгоритмом.

Како се размена података врши у комуникацији са сервером без креирања сесије, при сваком новом упиту сервер очекује заглавље \texttt{Authorization}, како би кориснику вратио захтеване податке. Сервис апликације који је задужен за постављање овог заглавља је \texttt{LoginService.js}.

\lstinputlisting[language=HTML5,caption=LoginService.js сервис који омогућава пријаву корисника]{primeri_koda/news_app/LoginService.js}

Из наведеног се може видети да сервис \texttt{LoginService} у суштини представља објекат са главним методом \texttt{ login}, који дефинише поменуто \texttt{Authorization} заглавље HTTP захтева. Такође, \texttt{LoginService} води рачуна о томе да ли је корисник успешно пријављен на апликацију. Поред уграђених сервиса \texttt{\$http} и \texttt{ \$timeout}, \texttt{LoginService} користи додатно дефинисан сервис \texttt{ UserService}, који садржи саме податке корисника.

\lstinputlisting[language=HTML5,caption=UserService.js сервис који меморише корисничке податке]{primeri_koda/news_app/UserService.js}

\subsection{Комуникација са сервером}

Добра пракса у имплементацији комуникације са сервером је коришћење NG сервиса за ту сврху. Сама суштина комуникације се базира на AJAX упитима, док NG нуди механизме као што су \texttt{\$resource} и \texttt{\$http}, који представљају различите видове апстракције који програмеру пружају олакшице. У апликацији је коришћен \texttt{\$http} сервис као основа сервиса за комуникацију са API-ем.

Имајући у виду задате функционалности, сервиси апликације базирани на \texttt{\$http} NG сервису су подељени у три логичке целине тј. три посебна фајла:
\begin{enumerate}
    \item \texttt{ItemsService},
    \item \texttt{FoldersService},
    \item \texttt{FeedsService}.
\end{enumerate}

У наставку ће бити наведен део кода из \texttt{ItemService} сервиса, док су \texttt{FoldersService} и \texttt{FeedsService} сличне имплементације и користе се за добављање података по категоријама и токовима.

\lstinputlisting[language=HTML5,caption=ItemsService.js сервис који добавља податке о чланцима новости]{primeri_koda/news_app/ItemsService.js}

Наведене методе интензивно користе уграђен \texttt{\$http} сервис, који са своје две \texttt{callback} функције \texttt{success} и \texttt{error} помаже програмеру у откривању да ли је конекција са севером успешна и подаци валидни, или је дошло до грешке, при чему треба обавестити корисника нотификацијом.

\subsection{Приказивање података}

Наведени шематски HTML фајлови који се учитавају при одабиру руте садрже HTML елементе који ће се приказивати у Интернет прегледачу као екрани апликације. Странице апликације које приказују новости, категорије и токове користе у основи исти механизам за приказ садржаја који добијају позивом метода наведених сервиса. Овај механизам се заснива на употреби додатно дефинисане директиве и уграђене директиве \texttt{ng-repeat}. \texttt{ng-repeat} директива има исту улогу као \texttt{foreach} или \texttt{for in} петље у познатим скрипт језицима. Посебно дефинисана директива \texttt{items-listing} је коришћења за приказ новости, а начин на који је употребљена приказан је у наставку:

\lstinputlisting[language=HTML5,caption=Садржај main.html фајла]{primeri_koda/news_app/main.html}

Прва линија кода директивом \texttt{ng-switch} условно приказује садржај угњеждених елемената. Вредност ове директиве везана је за вредност променљиве \texttt{view} унутар \texttt{MainController} контролера. Наведени случај приказује угњеждене елементе уколико је вредност ове променљиве \texttt{All}, што значи да ће се на овај начин приказати све (и фаворизоване) новости.

Друга битна линија кода је линија која укључује посебно дефинисани елемент тј. директиву \texttt{items-listing}. Ова директива заправо генерише цео листинг који се приказује одабиром опције за приказ свих или фаворизованих новости. Коришћење \texttt{ng-repeat} директиве и предавања вредности објекта кроз вредност атрибута \texttt{data} омогућиће директиви приступ атрибутима сваког објекта из колекције, у овом случају, свакој новости из колекције новости. У наставку је приказана дефиниција директиве \texttt{items-listing}.

\lstinputlisting[language=HTML5,caption=itemsListing.js директива којом се чланци новости исписују]{primeri_koda/news_app/itemsListing.js}

Дефиниција наведене директиве употребљава напреднији начин, јер користи прослеђивање у изолован контекст кроз атрибут \texttt{data}. Може се видети да ће контекст директиве садржати референцу на тренутну новост из колекције новости и да ће у функцији \texttt{compile} бити омогућен приступ њеним атрибутима, као што су \texttt{id, title, starred, unread, author, pubDate}, итд.

\subsection{Локализација}

У једном од претходних поглавља представљен је концепт филтера и наведене су могуће употребе, при чему је посебно наглашена употреба филтера за локализацију апликације. У примеру \ref{cod:localization} је представљен начин на који су филтери коришћени за локализацију апликације. Пример \ref{cod:localization_data} показује начин на који су ускладиштени подаци локализације у JSON формату.

\lstinputlisting[language=HTML5,label=cod:localization,caption=Коришћење филтера у локализацији]{primeri_koda/news_app/main_localization.html}

\lstinputlisting[language=HTML5,label=cod:localization_data,caption=Локализација за српски језик]{primeri_koda/news_app/localization_data.js}

Апликација је тренутно локализована за енглеско и српско говорно подручије, али се једноставним додавањем новог фајла и одговарајућим преводом може локализовати за било који језик.

\section{Сарадња на развоју софтвера}

На самом почетку развоја апликације за \textit{FirefoxOS}, било је потребно упознати се са менторима и ухватити њихов ритам. IRC канал је био главно средство комуникације. Иако су задатку била додељени ментори Бернхард Поселт и Алесантро Консентино, целокупна комуникација се одвијала са Бернхардом, јер је био најбоље упознат са технологијама чију је употребу задатак захтевао. Размена програмског кода се одвијала преко \textit{GitHub} репозиторијума. Такође, преко овог сервиса се одвијала комуникација везана за унапређивања саме имплементације. \textit{GitHub} је омогућио свима који су заинтересовани да допринесу на разне начине, било да се ради о самом коду, документацији или дизајну. Да би се најбоље приказао досадашњи допринос и тренутно стање репозиторијума у наставку ће бити приказани графикони преузети са \textit{GitHub}-а.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{slike/github_graphs/contributions.png}
	\caption{Приказ активности аутора рада на репозиторијуму апликације}
	\label{fig:github_contributions}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{slike/github_graphs/commits_added.png}
	\caption{Приказ учесника који су допринели програмском коду, време када су радили и мера активности}
	\label{fig:github_commits}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{slike/github_graphs/all_pull_requests.png}
	\caption{Приказ успешно затворених \texttt{pull request}-ова}
	\label{fig:github_pull_requests}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{slike/github_graphs/issues_open.png}
	\caption{Незатворени проблеми који чекају разрешење}
	\label{fig:github_issues_open}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.5]{slike/github_graphs/issues_closed.png}
	\caption{Неки од решених проблема ownCloud News апликације}
	\label{fig:github_issues_closed}
\end{figure}

Процес сарадње на програмском коду преко \textit{GitHub} репозиторијума се своди на следеће кораке:
\begin{enumerate}
    \item Креирање посебне гране од главног репозиторијума и рад на њој,
    \item Када се укаже потреба за спајањем верзије кода са гране, прави се захтев за спајање тзв. \texttt{pull request},
    \item Промене и додаци на коду су видљиви свима, а само укључени у рад на репозиторијуму могу коментарисати и захтевати евентуалне преправке,
    \item Уколико има преправки, програмер који је направио захтев за припајање треба да их исправи, и када се већина сложи \texttt{pull request} се може довршити. Тада програмском коду на главном репозироријуму бива преправљен и додат нови програмски код.
    \item Свака следећа дорада и преправка се одвија у сличном маниру.
\end{enumerate}

У току рада на програмском коду могуће је започети конверзацију у вези са могућим проблемима, критикама и дорадама. Обично се таква конверзација започиње отварањем тзв. \texttt{issue}-а. На Сликама \ref{fig:github_issues_open} и \ref{fig:github_issues_closed} се могу видети досадашњи отворени и затворени \texttt{issue}-и.

Након испуњења задатка у погледу функционалности апликације било је потребно запаковати апликацију и објавити је на \textit{Firefox}-овом маркету за апликације. Овај маркет је овлашћени дистрибутер \textit{FirefoxOS} апликација и било је потребно задовољити постојеће стандарде. Једна од неопходних провера је контрола програмског кода коју је апликација морала да задовољи. Извештај конроле програмског кода дат је на Слици \ref{fig:firefox_marketplace_validation}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.3]{slike/firefox_marketplace_package_validation.png}
	\caption{Валидација програмског кода апликације}
	\label{fig:firefox_marketplace_validation}
\end{figure}

Временом, као сваки озбиљан дистрибутер, \textit{Firefox Marketplace} је увео класификацију апликација према типу садржаја које нуде. Тако је апликација \textit{News} добила категорије приказане на Слици \ref{fig:firefox_marketplace_content_ratings}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.3]{slike/firefox_marketpalace_content_ratings.png}
	\caption{Класификација апликације према типу садржаја које пружа корисницима}
	\label{fig:firefox_marketplace_content_ratings}
\end{figure}

Изглед описа апликације који је приказан када корисник жели да инсталира апликацију преко \textit{Firefox Marketplace}-а је приказан на Слици \ref{fig:firefox_marketplace_submitted_app}. Такође, \textit{Firefox Marketplace} даје могућност корисницима да оцене апликацију, па ће досадашње оцене ове апликације бити приказане на Слици \ref{fig:firefox_marketplace_submitted_app_review}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/firefox_marketplace_submitted_app.png}
	\caption{Основни опис апликације који корисник види када жели да инсталира апликацију}
	\label{fig:firefox_marketplace_submitted_app}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/firefox_marketplace_submitted_app_review.png}
	\caption{Неке оцене корисника \textit{FireFoxOS News} апликације}
	\label{fig:firefox_marketplace_submitted_app_review}
\end{figure}

\section{Употреба апликације}

Ово поглавље ће представити екране апликације и појаснити начин на који се апликација користи.
Након покретања апликације корисник мора унети податке за аутентификацију. Ако има дозволу за приступ апликацији \textit{News} имаће приступ и \textit{FirefoxOS News} апликацији. Након успешне аутентификације, корисник може изабрати један од следећих листинга:

\begin{itemize}
    \item{All feeds articles},
    \item{All favorite articles},
    \item{All folders},
    \item{All items}.
\end{itemize} 

Након отварања једног од листинга, могу се читати чланци уз могућност обележавања да су омиљени или прочитани. Притиском на дугме у горњем десном углу апликације, корисник се одјављује са апликације и бива преусмерен на почетни екран за аутентификацију.

\begin{figure}[H]
    \centering
    %
	\begin{subfigure}[t]{0.3\textwidth}
	\centering
	\includegraphics[scale=0.3,width=\textwidth]{slike/firefoxos/owncloudnews_login.png}
	\caption{Почетни екран апликације задужен за аутентификацију корисника}
	\label{fig:owncloudnews_login}
	\end{subfigure}
	%
	\begin{subfigure}[t]{0.3\textwidth}
	\centering
	\includegraphics[scale=0.3,width=\textwidth]{slike/firefoxos/owncloudnews_all_feeds_articles.png}
	\caption{Преглед свих чланака свих токова вести}
	\label{fig:owncloudnews_all_feeds_articles}
	\end{subfigure}
	%
	\begin{subfigure}[t]{0.3\textwidth}
	\centering
	\includegraphics[scale=0.3,width=\textwidth]{slike/firefoxos/owncloudnews_all_feeds_articles_one.png}
	\caption{Преглед једног чланка}
	\label{fig:owncloudnews_all_feeds_articles_one}
	\end{subfigure}
%	\caption{Екрани симулатора \texttt{Firefox} оперативног система}
\end{figure}

\begin{figure}[H]
    \centering
    %
	\begin{subfigure}[t]{0.3\textwidth}
	\includegraphics[scale=0.3,width=\textwidth]{slike/firefoxos/owncloudnews_favorite.png}
	\caption{Преглед свих омиљених чланака свих токова вести}
	\label{fig:owncloudnews_favorite}
	\end{subfigure}
	%
	\begin{subfigure}[t]{0.3\textwidth}
	\includegraphics[scale=0.3,width=\textwidth]{slike/firefoxos/owncloudnews_all_folders.png}
	\caption{Преглед постојећих категорија токова}
	\label{fig:owncloudnews_all_folders}
	\end{subfigure}
	%
	\begin{subfigure}[t]{0.3\textwidth}
	\includegraphics[scale=0.3,width=\textwidth]{slike/firefoxos/owncloudnews_all_feeds.png}
	\caption{Преглед свих токова}
	\label{fig:owncloudnews_all_feeds}
	\end{subfigure}
	\caption{Екрани \texttt{News} апликације за \texttt{Firefox} оперативни систем}
\end{figure}

\section{Идеје за даљи развој}

Могућности описане апликације су у досадашњем развоју биле ограничене верзијом API-а, који дозвољава упошљавање само дела функционалности \textit{ownCloud News} апликације. Проширењем API-а у некој од идућих верзија био би отворен нови скуп функционалности које би се могле имплементирати. Поред тога, и са постојећим API-jem се може унапредити неколико аспеката мобилне апликације у смеру побољшања корисничког доживљаја:
\begin{itemize}
    \item Имплементација локалног складиштења података. У ове податке би се уврстили кориснички приступни подаци и сви подаци који се допремају са сервера. Коришћењем локалног складишта оперативног система или Интернет прегледача би се убрзала навигација корисника по екранима апликације. Допремање података изнова је нешто што би се свакако овим решењем могло избећи,
    \item Имплементација подешавања у смислу опција које корисник може изабрати, а тичу се функционалности и изгледа апликације. Подешавања која би корисник могао да мења су интервал освежавања и промена тренутног изгледа апликације бирањем неког од понуђених,
    \item Имплементација додатне функционалности за превремено освежавање листинга искључиво новим чланцима,
    \item Измена и унапређење дизајна апликације ради интуитивнијег коришћења.
\end{itemize}


